<template>
  <el-card>
    <!-- ! 搜索表单区域 -->
    <el-form inline size="small">
      <el-form-item label="用户名">
        <el-input
          placeholder="请输入用户名"
          v-model="queryData.username"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input
          placeholder="请输入手机号"
          v-model="queryData.mobile"
        ></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select placeholder="请选择" v-model="queryData.sex">
          <el-option label="男" :value="1"></el-option>
          <el-option label="女" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="btnSearch">
          搜索
        </el-button>
        <el-button size="small" @click="btnReset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- ! 操作区域 -->
    <el-row type="flex" justify="space-between">
      <div>
        <el-button
          size="small"
          type="primary"
          @click="$refs.addUser.dialogShow = true"
          :disabled="!checkPermissionBtn('ydd_user@add')"
        >
          新增
        </el-button>
        <el-button size="small" type="warning" icon="el-icon-download"  plain @click="exportFn1">导出</el-button>
      </div>
      <div>右侧内11容 {{ checkPermissionBtn('ydd_user@add') }}</div>
    </el-row>
    <!-- ! 表格区域 -->
    <el-table :data="list" border>
      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="mobile" label="手机号"></el-table-column>
      <el-table-column prop="icon" label="用户头像">
        <template slot-scope="scope">
          <img
            style="height: 50px"
            v-if="scope.row.icon"
            :src="'http://124.223.14.236:8060/' + scope.row.icon"
          />
        </template>
      </el-table-column>
      <el-table-column prop="sex" label="性别">
        <template slot-scope="scope">
          <el-tag type="primary" v-if="scope.row.sex">男</el-tag>
          <el-tag type="danger" v-else>女</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="birthday" label="出生年月"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="success"
            size="small"
            circle
            icon="el-icon-edit"
            @click="editRow(scope.row.id)"
          ></el-button>
          <el-button
            type="danger"
            size="small"
            circle
            icon="el-icon-delete"
            @click="delRow(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- ! 分页区域 -->
    <el-pagination
      @size-change="sizeChange"
      @current-change="pageChange"
      :current-page.sync="queryData.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="queryData.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      background
    ></el-pagination>
    <!-- ! 新增修改区域 -->
    <add-user ref="addUser" @updateList="initData" />
  </el-card>
</template>
<script>
// 思路：
// 大功能思路：
// 1. 创建页面配置路由
// 2. 绘制页面内容 (设计好哪些将来是拆分为组件)
// 3. 实现功能
// -------------查询功能--------------
// 1. 分析接口  地址  /ydd_user/list  方式  GET   数据 { sex:'', username:'', mobile:'',page:1, limit:10 }
// 2. 封装接口
// 3. data定义变量 【表格数据变量、查询参数变量(搜索表单相关变量、页码、每页数量)、总数变量】
// 4. methods定义方法，获取数据   【可能存在数据加工处理】
// 5. created调用
// 6. 渲染数据  【细节渲染耗时】
// 7. 分页功能实现  【2个事件，3个变量】
// 8. 条件搜索 【将变量绑定给表单、搜索按钮点击提交】
// -------------删除功能--------------
// 1. 分析接口  地址  /ydd_user/del  方式 GET  数据 {id:xxx}
// 2. 封装接口
// 3. 删除按钮绑定事件，传入删除行ID
// 4. 定义删除事件函数 【弹出确认框、发生删除请求、提示成功、页码处理、列表更新】
import { getUserListApi, delUserApi } from '@/api/user'
import addUser from './components/addUser.vue'
import turnGender from '@/api/constant/employees'
export default {
  components: { addUser },
  name: 'User',
  data() {
    return {
      list: [], // 表格数据
      queryData: {
        // 列表的查询参数  【搜索表单、页码、每页数量】
        sex: '',
        username: '',
        mobile: '',
        page: 1,
        limit: 10
      },
      total: 0 // 总数
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 获取表格数据
    async initData() {
      const { count, data } = await getUserListApi(this.queryData)
      this.list = data
      this.total = count
    },
    // 每页数量切换事件
    sizeChange(val) {
      this.queryData.limit = val
      this.initData()
    },
    // 页码切换事件
    pageChange(val) {
      this.queryData.page = val
      this.initData()
    },
    // 搜索提交
    btnSearch() {
      this.queryData.page = 1
      this.initData()
    },
    // 搜索重置
    btnReset() {
      this.queryData = {
        sex: '',
        username: '',
        mobile: '',
        page: 1,
        limit: 10
      }
      this.initData()
    },
    // 删除事件
    async delRow(id) {
      try {
        await this.$confirm('确认删除吗？')
      } catch (error) {
        return console.log(error)
      }
      await delUserApi(id)
      this.$message.success('删除成功')
      if (this.queryData.page > 1 && this.list.length === 1) {
        this.queryData.page--
      }
      this.initData()
    },
    // 修改事件
    editRow(id) {
      this.$refs.addUser.getRowInfo(id)
    },
    exportFn1() {
      // import ('aaa') //按需导入
      import('@/vendor/Export2Excel').then(async excel => {
        // console.log(data)
        const { data } = await getUserListApi({
          page: 1,
          limit: 100
        })
        // console.log(data)
        // 3.整理数据过程
        const res = this.generateData(data)
        excel.export_json_to_excel({
          header: res.headerKey, // 表头，必填
          data: res.bodyData, // 具体数据，必填
          filename: '会员', // 非必填
          autoWidth: true, // 非必填
          bookType: 'xlsx'// 非必填
        })
      })
    },
    generateData(data) {
      // console.log(data)
      const headers = {
        用户ID: 'id',
        用户名: 'username',
        手机号: 'mobile',
        用户头像: 'icon',
        性别: 'sex',
        出生年月: 'birthday'
      }
      // 处理表头
      const headerKey = Object.keys(headers)
      // console.log(headerKey)

      // 准备数组，存储最终结果
      const result = []
      // 对传进来的data，也就是勾选的表格信息进行处理
      data.forEach(item => {
        // item是 {username:'张三',mobile:'123',department:'组织部'}
        const row = []
        Object.keys(headers).forEach(val => {
          // val是每个中文，headers[val]是每个英文   item[headers[val]]就是item里面对应英文键的数据值
          // console.log(val, headers[val], item[headers[val]])
          // 处理性别
          if (headers[val] === 'sex') {
            const info = turnGender.gender.find(obj => obj.id === item[headers[val]])
            // console.log(info)
            row.push(info ? info.value : '女')
          } else {
            row.push(item[headers[val]])
          }
        })
        result.push(row)
      })
      // console.log(result)
      // console.log(result)// 得到一个二维数组
      return { headerKey, bodyData: result }
    }
  }
}
</script>
<style scoped></style>
